// 首面
<template>
    <div class="whole" style="width:100%;height:100%;">
        <!-- {{page_title}} -->
        <!-- {{this.treeList}} -->
        <!-- {{search_title_show}} -->
        <el-container style="display: flex; flex-direction: column; height: 100%;">
            <el-header style="flex: 0 0 5%; background-color:#d3d4d7; display:flex; align-items:center; border: 1px solid grey;">
                <div class="header1box" style="width:5%;" :style="page_title[1]==='home'?'backgroundColor:white':{}" ><router-link to="/index/home">首页</router-link></div>
                <div class="header1box" style="width:7%;" :style="page_title[1]==='geology'?'backgroundColor:white':{}" ><router-link to="/index/geology/wk">地质专题</router-link></div>
                <div class="header1box" style="width:7%;" :style="page_title[1]==='soil'?'backgroundColor:white':{}" ><router-link to="/index/soil/wk">土壤专题</router-link></div>
                <div class="header1box" style="width:7%;" :style="page_title[1]==='user'?'backgroundColor:white':{}" ><router-link to="/index/user">用户管理</router-link></div>
                <div style="position:absolute;right:2%;display:flex;cursor:pointer"><router-link to="/index/user"><i class="el-icon-user-solid" style="font-size:20px;margin-right:6px"></i>{{who_i.name}}</router-link></div>
            </el-header>
            <el-header style="flex: 0 0 7%; background-color:#e7ebef;align-items:center;margin:0;padding:0">
                <div v-if="page_title[1]==='home'?true:false" class="index_column" style="width:100%;height:100%;display:flex;">
                    <div class="header2box" style="background-color:white">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/index_column_points.png" style="width:35px;padding-left:36%;padding-top:5%">
                        </div>
                        <div style="flex:1;">样本总览</div>
                    </div>
                    <div class="header2box" @click="search_title_open" :style="header2box_clicked">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/index_column_search_title.png" style="width:35px;padding-left:36%;padding-top:5%">
                        </div>
                        <div style="flex:1;">专题查询</div>
                    </div>
                </div>
                <div v-if="page_title[1]==='geology'?true:false" class="index_column" @click="$router.push('/index/geology/wk')" style="width:100%;height:100%;display:flex;">
                    <div class="header2box" :style="page_title[2]==='wk'?'background-color:white':{}">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/index_column_geology_wk.png" style="width:35px;padding-left:36%;padding-top:5%">
                        </div>
                        <div style="flex:1;">调查点信息</div>
                    </div>
                    <!-- <div class="header2box" @click="$router.push('/index/geology/details')" :style="page_title[2]==='details'?'background-color:white':{}">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/index_column_details.png" style="width:35px;padding-left:32%;padding-top:5%">
                        </div>
                        <div style="flex:1;">综合信息</div>
                    </div> -->
                </div>
                <div v-if="page_title[1]==='soil'?true:false" class="index_column" style="width:100%;height:100%;display:flex;">
                    <div class="header2box" @click="$router.push('/index/soil/wk')" :style="page_title[2]==='wk'?'background-color:white':{}">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/index_column_soil_wk.png" style="width:35px;padding-left:36%;padding-top:5%">
                        </div>
                        <div style="flex:1;">调查点信息</div>
                    </div>
                    <div class="header2box" @click="$router.push('/index/soil/analyse')" :style="page_title[2]==='analyse'?'background-color:white':{}">
                        <div style="flex:0 0 60%;width:100%;">
                            <img src="../../public/data_analyse.png" style="width:35px;padding-left:36%;padding-top:5%">
                        </div>
                        <div style="flex:1;">数据分析</div>
                    </div>
                </div>
            </el-header>
            <el-container style="flex: 0 0 85%; display: flex; flex-direction: row; background-color:#d3d4d7;border-top:1px solid grey">
                <el-aside style="flex: 0 0 17%; display:flex;flex-direction:column">
                    <div style="flex:0 0 93%">
                        <div style="">快速导航</div>
                        <div class="tree-container">
                            <el-tree
                            ref="treeRef"
                            :node-key="'id'"
                            :data="treeList"
                            :props="defaultProps"
                            :default-expand-all="true"
                            @node-click="handleNodeClick"
                            >
                            <span slot-scope="{ data }">
                                <!-- {{data.hasOwnProperty('children')}} -->
                                <div v-if="data.hasOwnProperty('children')" style="display: flex; align-items: center; margin-left: 0px;">
                                    <img src="@/assets/folder.png" alt="Icon" style="width:35px">
                                    <span style="padding-left:10px">{{data.label }}</span>
                                </div>
                                <div v-else style="display: flex; align-items: center; margin-left: 0px;">
                                    <img src="@/assets/earth.png" alt="Icon" style="width:25px; padding-left:2px">
                                    <span style="padding-left:10px">{{data.label }}</span>
                                </div>
                            </span>
                            </el-tree>
                        </div>
                    </div>
                    <div style="flex:1"></div>
                </el-aside>
                <el-main style="background-color:orange; flex: 1;padding:0;position:relative;">
                    <router-view style="width:100%;height:100%;position:absolute;" ref="child"> </router-view>
                    <div v-if="search_title_show" class="search_title" style="display:flex;flex-direction:column;">
                        <div style="flex:0 0 6%;background-color:#959da9;align-content:center;position:relative;">
                            <i class="el-icon-search" style="margin-left:5px;"></i>
                            <span style="color:white;margin-left:5px;">专题查询</span>
                            <i class="el-icon-close" style="position:absolute;right:5%" @click="search_title_show=false;header2box_clicked.backgroundColor='';"></i>
                        </div>
                        <div style="flex:1;display:flex; flex-direction:column;">
                            <div style="flex:0 0 25%;position:relative;">
                                <el-form id='search_title' :model="search_title_req">
                                    <el-col :span="12">
                                        <el-form-item label="行政区划（区/县）" class="first_column" label-width='180px'>
                                            <el-select v-model="search_title_req.county" size="mini" style="width:180px;">
                                                <el-option
                                                v-for="item in search_title_options.county"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.label"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专题" class="first_column" label-width="100px">
                                            <el-select v-model="search_title_req.title" size="mini" style="width:150px;">
                                                <el-option
                                                v-for="item in search_title_options.title"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="调查时间" label-width="180px">
                                            <el-select v-model="search_title_req.time"
                                            size="mini"
                                            multiple
                                            collapse-tags
                                            style="width:150px;"
                                            >
                                                <el-option
                                                v-for="item in search_title_options.time"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-form>
                                <el-button style="position:absolute; top:45%;left:50%;width:100px;height:40px;" @click="search_title_ok">查询</el-button>
                                <el-button style="position:absolute; top:45%;left:70%;width:100px;height:40px;" @click="search_title_reset">重置</el-button>
                            </div>
                            <div style="flex:1;">
                                <el-table style="width:100%;" :data="search_title_resp" max-height="400px">
                                    <el-table-column
                                        prop="id"
                                        label="序号"
                                        width="80">
                                    </el-table-column>
                                    <el-table-column
                                        prop="county"
                                        label="区县"
                                        width="120">
                                    </el-table-column>
                                    <el-table-column
                                        prop="town"
                                        label="乡镇"
                                        width="150">
                                    </el-table-column>
                                    <el-table-column
                                        prop="latitude"
                                        label="纬度"
                                        width="110">
                                    </el-table-column>
                                    <el-table-column
                                        prop="longitude"
                                        label="经度"
                                        width="110">
                                    </el-table-column>
                                    <el-table-column
                                        prop="id_sample"
                                        label="采样点编号"
                                        width="120">
                                    </el-table-column>
                                    <el-table-column
                                        prop="time"
                                        label="时间"
                                        width="100">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {treeList} from '@/assets/common'
import Axios from '@/my_axios'

export default {
    name: 'indexVue',
    mounted() {
        const tmp = this.$route.path.toString().split('/');
        this.page_title = tmp.slice(1,tmp.length);
        this.get_i();
    },
    data() {
        return {
            // title
            page_title: [],//默认为首页专题

            // style
            header1box_clicked: {},
            header2box_clicked: {},

            // 身份
            who_i:{},
            
            // 树列表
            treeList: [treeList],
        
            // 对象关系映射
            defaultProps: {
                label: 'label',
                children: 'children',
            },

            //search_title
            search_title_show:false,
            search_title_options:{
                county:[],
                title:[
                    {
                        label:'地质专题',
                        value:'dz',
                    },
                    {
                        label:'土壤专题',
                        value:'tr',
                    }
                ],
                time:[
                    {
                        label: '2021/04',
                        value: '2021/04',
                    },
                    {
                        label: '2021/08',
                        value: '2021/08',
                    },
                    {
                        label: '2022/04',
                        value: '2022/04',
                    },
                    {
                        label: '2022/06',
                        value: '2022/06',
                    },
                    {
                        label: '2022/08',
                        value: '2022/08',
                    },
                ],
            },//选项数据
            search_title_req:{},//request数据
            search_title_resp:[],//resp处理数据
        }
    },
    watch: {
        '$route'(to) { // const tmp = to.path.toString().split('/');
            // this.page_title = tmp[tmp.length-1];
            const tmp = to.path.toString().split('/');
            this.page_title = tmp.slice(1, tmp.length);
        }
    },
    computed: {
    },
    methods: {
        get_i(){
            Axios.post('/who_i').then((resp)=> {
                this.who_i = resp.data.data
                // console.log("*****", this.who_i)
            })
        },
        handleNodeClick(data) {
            // console.log("*******", data)
            if(this.$route.path!='user')
                this.$refs.child.navi_click(data) // user页面该功能失效
        },
        search_title_open() {
            this.search_title_show = true;

            this.header2box_clicked.backgroundColor = 'white';//点击后，样式改变

            if(this.search_title_options.county.length==0)//避免二次打开时，重复添加 
                this.treeList[0].children.forEach((element)=> {
                    // console.log('element', element)
                    this.search_title_options.county.push(element);
                })
        },
        search_title_ok() {
            Axios.post('/search_WK', {
                search_WK_req:this.search_title_req
            }).then((resp)=> {
                // console.log('resp:', resp)
                this.search_title_resp = resp.data.data;
            })
        },
        search_title_reset() {
            this.search_title_req = {};
            this.search_title_resp = [];
        }
    },
}
</script>

<style lang='less' scoped>
.header1box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid grey;
    font-family: 'KaiTi';
    font-size: 18px;
    cursor: pointer;
}
.router-link-active {
    color:black;
    text-decoration: none;
}

a{

    color:black;
    text-decoration: none;
}


.header2box {
    width: 6%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 3px solid grey;
    font-family: 'KaiTi';
    font-size: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 15px;
}

.tree-container /deep/ .el-tree-node__content {
    display: flex ;
    align-items: center;
    height: 26px;
    cursor: pointer;
    height:35px;
    border-bottom: 1px solid grey;
    border-left: 1px solid grey;
}
// 设置树形组件节点的定位和左内边距
.tree-container /deep/ .el-tree-node {
    position: relative;
    padding-left: 0px;
}

// 设置树形组件节点的 before 伪类的样式
.tree-container /deep/ .el-tree-node:before {
    width: 1px;
    height: 100%;
    content: '';
    position: absolute;
    top: -38px;
    bottom: 0;
    left: 0;
    right: auto;
    border-width: 1px;
    border-left: 1px solid #b8b9bb;
}

// 设置树形组件节点的 after 伪类的样式
.tree-container /deep/ .el-tree-node:after {
    width: 13px;
    height: 13px;
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    top: 12px;
    bottom: auto;
    border-width: 1px;
    border-top: 1px solid #b8b9bb;
}

// 设置树形组件首节点的左边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}

// 设置树形组件首节点的顶部边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}

// 设置树形组件末节点的 before 伪类的高度
.tree-container /deep/ .el-tree .el-tree-node:last-child:before {
    height: 50px;
}

// 设置树形组件节点字体大小、以及取消左内边距
.tree-container /deep/ .el-tree .el-tree-node__content {
    color: #000;
    font-size: 15px;
    font-weight: 400;
    padding-left: 0 !important;
}

// 设置树形组件孩子节点左内边距
.tree-container /deep/ .el-tree .el-tree-node__children {
    padding-left: 11.5px;
}

// 设置树形组件叶子节点的默认图标不显示
.tree-container /deep/ .el-tree .el-tree-node__expand-icon.is-leaf {
    display: none;
}


// 设置树形组件有叶子节点的左外边距
.tree-container /deep/ .el-tree .el-tree-node__content:has(.is-leaf){
// color: aqua;
    margin-left: 20px !important;
}

.search_title {
    width: 800px;
    height: 600px;
    background-color:white;
    position:absolute;
    top:5%;
    left:20%;
    border:3px solid #3498db;
    box-shadow: 5px 5px 10px rgba(0, 0, 0.5);
}

.search_title /deep/ .first_column {
    margin-top:5px;
}
</style>
